/*
 * @Author: Await
 * @Date: 2025-05-06 17:25:35
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 17:25:35
 * @Description: 主题工具箱配置组件
 */
import React from 'react';
import {
  Row,
  Col,
  Typography,
  ColorPicker,
  Divider,
  InputNumber,
  Select,
  Card,
  Tooltip,
} from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import type { ThemeConfig } from '../../../types/chartTypes';

const { Title, Text } = Typography;
const { Option } = Select;

interface ToolboxConfigProps {
  value: ThemeConfig;
  onChange: (newValue: any) => void;
}

/**
 * 主题工具箱配置组件
 * 配置工具箱图标样式
 */
const ToolboxConfig: React.FC<ToolboxConfigProps> = ({ value, onChange }) => {
  // 初始化工具箱配置
  const toolboxConfig = value.toolbox || {
    iconStyle: {
      normal: {
        borderColor: '#999',
        color: '#666',
      },
      emphasis: {
        borderColor: '#666',
        color: '#333',
      },
    },
  };

  // 更新图标样式
  const updateIconStyle = (state: 'normal' | 'emphasis', key: string, val: any) => {
    onChange({
      ...value,
      toolbox: {
        ...toolboxConfig,
        iconStyle: {
          ...toolboxConfig.iconStyle,
          [state]: {
            ...(toolboxConfig.iconStyle[state] || {}),
            [key]: val,
          },
        },
      },
    });
  };

  return (
    <div className="theme-toolbox-config">
      <Card title="工具箱图标样式" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Title level={5}>
              默认状态
              <Tooltip title="工具箱图标的默认状态样式">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Title>
          </Col>
          <Col span={6}>
            <Text>边框颜色</Text>
            <div>
              <ColorPicker
                value={toolboxConfig.iconStyle?.normal?.borderColor || '#999'}
                onChange={(color) => updateIconStyle('normal', 'borderColor', color.toHexString())}
                showText
              />
            </div>
          </Col>
          <Col span={6}>
            <Text>图标颜色</Text>
            <div>
              <ColorPicker
                value={toolboxConfig.iconStyle?.normal?.color || '#666'}
                onChange={(color) => updateIconStyle('normal', 'color', color.toHexString())}
                showText
              />
            </div>
          </Col>
          <Col span={6}>
            <Text>边框宽度</Text>
            <InputNumber
              value={toolboxConfig.iconStyle?.normal?.borderWidth || 1}
              onChange={(val) => updateIconStyle('normal', 'borderWidth', val)}
              min={0}
              max={5}
              style={{ width: '100%' }}
            />
          </Col>
          <Col span={6}>
            <Text>边框类型</Text>
            <Select
              value={toolboxConfig.iconStyle?.normal?.borderType || 'solid'}
              onChange={(val) => updateIconStyle('normal', 'borderType', val)}
              style={{ width: '100%' }}
            >
              <Option value="solid">实线</Option>
              <Option value="dashed">虚线</Option>
              <Option value="dotted">点线</Option>
            </Select>
          </Col>
        </Row>

        <Divider style={{ margin: '16px 0' }} />

        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Title level={5}>
              高亮状态
              <Tooltip title="工具箱图标的鼠标悬停状态样式">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Title>
          </Col>
          <Col span={6}>
            <Text>边框颜色</Text>
            <div>
              <ColorPicker
                value={toolboxConfig.iconStyle?.emphasis?.borderColor || '#666'}
                onChange={(color) => updateIconStyle('emphasis', 'borderColor', color.toHexString())}
                showText
              />
            </div>
          </Col>
          <Col span={6}>
            <Text>图标颜色</Text>
            <div>
              <ColorPicker
                value={toolboxConfig.iconStyle?.emphasis?.color || '#333'}
                onChange={(color) => updateIconStyle('emphasis', 'color', color.toHexString())}
                showText
              />
            </div>
          </Col>
          <Col span={6}>
            <Text>边框宽度</Text>
            <InputNumber
              value={toolboxConfig.iconStyle?.emphasis?.borderWidth || 1}
              onChange={(val) => updateIconStyle('emphasis', 'borderWidth', val)}
              min={0}
              max={5}
              style={{ width: '100%' }}
            />
          </Col>
          <Col span={6}>
            <Text>边框类型</Text>
            <Select
              value={toolboxConfig.iconStyle?.emphasis?.borderType || 'solid'}
              onChange={(val) => updateIconStyle('emphasis', 'borderType', val)}
              style={{ width: '100%' }}
            >
              <Option value="solid">实线</Option>
              <Option value="dashed">虚线</Option>
              <Option value="dotted">点线</Option>
            </Select>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default ToolboxConfig;